import React from 'react';
import { Link } from 'react-router-dom';

import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx';

import PageTitle from 'component/page-title/index.jsx';
import TableList from 'util/table-list/index.jsx';

const __mm = new MUtil();
const __product = new Product();

class CategoryList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      parentCategoryId: this.props.match.params.categoryId || 0
    };
  }

  // 调用 loadCategoryList 的生命函数
  componentDidMount() {
    this.loadCategoryList();
  }

  componentDidUpdate(prevProps, prevState){
    let oldPath = prevProps.location.pathname,
        newPath = this.props.location.pathname,
        newId = this.props.match.params.categoryId || 0;
    if(oldPath !== newPath){
      this.setState({
        parentCategoryId : newId
      }, () => {
        this.loadCategoryList()
      });
    }
    // console.log('componentDidUpdate');
    // console.log(this.props.match.params.categoryId);
  }

  // 加载品类列表
  loadCategoryList() {
    __product.getCategoryList(this.state.parentCategoryId).then(res => {
      this.setState({
        list: res
      })
    }, errMsg => {
      // 假如接口请求错误的话，我们应该把原来的数据删掉
      this.setState({
        list: []
      });
      __mm.errorTips(errMsg);
    });
  }

  // 更新品类的名字
  onUpdateName(categoryId, categoryName) {
    let newName = window.prompt('请输入新的品类名称', categoryName);
    if (newName) {
      __product.updateCategoryName({
        categoryId: categoryId,
        categoryName: newName
      }).then(res => {
        __mm.successTips(res);
        this.loadCategoryList();
      }, errMsg => {
        __mm.errorTips(errMsg);
      });
    }
  }

  // new Data(user.createTime).toLocaleString() 这就将其转化为了当地的一个时间
  render() {
    let listBody = this.state.list.map((category, index) => {
      return (
        <tr key={index}>
          <td>{category.id}</td>
          <td>{category.name}</td>
          <td>
            <a
              onClick={(e) => { this.onUpdateName(category.id, category.name) }}
              className="opear"
            >修改名称</a>
            {
              category.parentId === 0
              ? <Link to={`/product-category/index/${category.id}`}>查看子品类</Link>
              : null
            }
          </td>
        </tr>
      );
    });

    return (
      <div id="page-wrapper">
        <PageTitle title="品类列表">
          <div className="page-header-right">
            <Link to="/product-category/add" className="btn btn-primary">
              <i className='fa fa-plus'></i>
                添加品类
            </Link>
          </div>
        </PageTitle>
        <div className="row">
          <div className="col-md-12">
            <p>父品类ID: {this.state.parentCategoryId}</p>
          </div>
        </div>
        <TableList tableHeads={['品类ID', '品类ID', '操作']}>
          {listBody}
        </TableList>
      </div>
    );
  }
}

export default CategoryList;